<template>
  <div>
    <a-modal
      title="设置摄像机"
      :visible="visible"
      @ok="handleOk"
      @cancel="visible = false"
      width="200"
    >
      <vxe-table
        border
        highlight-hover-row
        :data="ipcs"
        ref="xTable"
        size="small"
        :edit-config="{ trigger: 'manual', mode: 'row' }"
      >
        <vxe-table-column field="id_in_box" title="标识"></vxe-table-column>
        <vxe-table-column
          field="ip"
          title="ip地址"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        ></vxe-table-column>
        <vxe-table-column
          field="b"
          title="单板"
          :edit-render="{
            name: '$input',
            props: { type: 'number', placeholder: '请输入数值' },
          }"
        ></vxe-table-column>
        <vxe-table-column
          field="p"
          title="端口"
          :edit-render="{
            name: '$input',
            props: { type: 'number', placeholder: '请输入数值' },
          }"
        ></vxe-table-column>
        <vxe-table-column
          field="rtsp"
          title="rtsp地址"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        ></vxe-table-column>

        <vxe-table-column field="s_name" title="名称"></vxe-table-column>
        <vxe-table-column
          field="business_id"
          title="编号"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        ></vxe-table-column>

        <vxe-table-column title="操作" width="160">
          <template #default="{ row }">
            <a-space>
              <template v-if="$refs.xTable.isActiveByRow(row)">
                <a-button @click="saveRowEvent(row)">保存</a-button>
                <a-button @click="cancelRowEvent(row)">取消</a-button>
              </template>
              <template v-else>
                <a-icon type="edit" @click="editRowEvent(row)" />
              </template>
              <template v-if="row.rtsp && row.rtsp.length > 0">
                <a-icon type="play-square" @click="playVideo(row)" />
              </template>
               <template v-if="row.ip && row.ip.length > 0">
                <a-icon type="delete" @click="removeVideo(row)" />
              </template>
            </a-space>
          </template>
        </vxe-table-column>
      </vxe-table>
    </a-modal>
  </div>
</template>
<script>
import Axios from "axios";
import { setBoxInfo, deleteCamera, getIPCs,playVideo } from "@/services/ipc";

import { createThing, saveThing, deleteThing } from "@/services/things";
export default {
  data() {
    return {
      visible: false,
      ipcs: [],
      initIPCS: [],
      owner: null,
      fun: null,
      box: null,
    };
  },
  created() {},
  //props: ["ipcs"],
  methods: {
    editRowEvent(row) {
      const $table = this.$refs.xTable;
      $table.setActiveRow(row);
    },
    saveRowEvent() {
      const $table = this.$refs.xTable;
      let self = this;
      $table.clearActived().finally(() => {});
    },
    cancelRowEvent(row) {
      const $table = this.$refs.xTable;
      $table.clearActived().then(() => {
        // 还原行数据
        $table.revertData(row);
      });
    },
    showDlg(box) {
      //this.ipcs = ipcs;
      let self = this;
      self.box = box;
      getIPCs(box).then((ipcs) => {
        self.ipcs = ipcs;
        self.visible = true;
      });
    },
    playVideo(row) {
      playVideo(this,row.rtsp)
    },
    removeVideo(row){
      row.ip = ""
      row.b = undefined
      row.p = undefined
      row.rtsp = ""
    },
    handleOk() {
      let self = this;
      this.ipcs.forEach((ipc) => {
        let sno = ipc.id_in_box.replace("Cam", "");
        ipc.uid = self.box.uid + "." + sno;
        if (!ipc || !ipc.ip || ipc.ip === "" || ipc.ip === "0.0.0.0") {
          deleteThing(ipc)
            .then(() => {
              deleteCamera(ipc.uid);
            })
            .catch((err) => {
              console.error(err);
            });

          return;
        }
        ipc.status_used = 1;
        ipc.station_id = self.box.station_id;
        ipc.model_id = "m_ipc";
        ipc.params = [
          { param_id: "ip", param_value: ipc.ip },
          { param_id: "username", param_value: ipc.username },
          { param_id: "password", param_value: ipc.password },
          { param_id: "port", param_value: ipc.port },
        ];
        let func = null;
        if (ipc.isEdit) {
          func = saveThing;
        } else {
          func = createThing;
        }
        func(ipc).then(() => {
          //boxID,ip,ipc_id,rtsp,playAddr,idinbox,b,p
          setBoxInfo(
            self.box.uid,
            ipc.ip,
            ipc.uid,
            ipc.rtsp,
            ipc.play_addr,
            ipc.id_in_box,
            ipc.b,
            ipc.p
          ).then(() => {
            self.visible = false;
            self.$emit("add_finished");
          });
        });
      });
    },
  },
};
</script>

<style scoped>
.vxe-select--panel {
  z-index: 9997 !important;
}
.vxe-select--panel {
  z-index: 9997 !important;
  color: black;
}
.vxe-cell .vxe-input > .vxe-input--inner,
.vxe-cell .vxe-textarea > .vxe-textarea--inner,
.vxe-table--filter-wrapper .vxe-input > .vxe-input--inner,
.vxe-table--filter-wrapper .vxe-textarea > .vxe-textarea--inner {
  padding: 0 2px;
  color: black;
}
</style>